<style>
header {
  width: 100%;
  height: 10vh;
  display: flex;
  -webkit-app-region: drag;
}
header .left-icon {
  width: 10%;
  height: 100%;
  -webkit-app-region: no-drag;
}
header .title {
  width: 75%;
  height: 100%;
  text-align: center;
}
header .right-icon {
  height: 100%;
  width: 15%;
  -webkit-app-region: no-drag;
  text-align: right;
}
</style>
<template>
  <div>
    <header>
      <div class="left-icon">前进</div>
      <div class="title">title</div>
      <div class="right-icon">
        <input type="button" value="-" />
        <input type="button" value="O" />
        <input type="button" @click="close" value="x" />
      </div>
    </header>
    <div id="wrapper">
      <img
        id="logo"
        src="~@/assets/logo.png"
        style="width:50%"
        alt="electron-vue"
      />
      <main>
        <button @click="get_new_message">托盘图标闪动</button>
        <button @click="new_message_read">关闭托盘图标闪动</button>
      </main>
    </div>
  </div>
</template>

<script>
// import { ipcRenderer } from "electron";

export default {
  name: "landing-page",
  created() {
    //下面是接受主进程发来的消息
    this.$electron.ipcRenderer.on("ping", (event, message) => {
      console.log(message); // Prints 'whoooooooh!'，这里的message是object类型
      alert();
    });
  },
  methods: {
    open(link) {
      this.$electron.shell.openExternal(link);
    },
    close() {
      // 发送消息给主进程
      this.$electron.ipcRenderer.send("close_mainwindow");
    },
    get_new_message() {
      this.$electron.ipcRenderer.send("get_new_message");
    },
    new_message_read() {
      this.$electron.ipcRenderer.send("new_message_read");
    }
  }
};
</script>

<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Source Sans Pro", sans-serif;
}

#wrapper {
  height: 90vh;
  padding: 60px 80px;
  width: 100vw;
}
button {
  font-size: 0.8em;
  cursor: pointer;
  outline: none;
  padding: 0.75em 2em;
  border-radius: 2em;
  display: inline-block;
  color: #fff;
  background-color: #4fc08d;
  transition: all 0.15s ease;
  box-sizing: border-box;
  border: 1px solid #4fc08d;
}

button.alt {
  color: #42b983;
  background-color: transparent;
}
</style>
